<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>课程列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
    <!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        body, .page {
            background: #fff;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        /*css 的样式都放在这里*/
        .buttons-tab {
            /* position: sticky;
            top: 0; */
            width: 100%;
            z-index: 99;
            margin-top:0.4rem;
            /*margin-bottom: 2.5rem;*/
        }

        .list-block {
            margin-top: 2rem 0 !important;
        }

        .item-subtitle {
            font-size: 0.6rem !important;
            color: #999;
        }
        .barFlex {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            line-height: 2.2rem;
            z-index: 9999;
        }
        .fixed-right{
            flex: 1;
        }

        .highlight {
            color: red;
        }

        .content-fixed {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 3.5rem;
            margin: 2rem 0;
        }
        .contentOut{
            margin-top: 5rem;
        }

        .fixed-left {
            margin-right: 0.6rem;
        }

        .left-img {
            width: 7rem;
            height: 4.3rem;
            border-radius: 0.2rem;
        }

        .left-img > img {
            width: 100%;
            height: 100%;
            border-radius: 0.2rem;
        }

        .fixed-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #9f9f9f;
        }

        .fixed-top-rigth {
            margin: 0 0.2rem;
        }

        .fixed-top-left-top {
            width: 5rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 0.8rem;
            font-weight: 600;
            color: #000;
        }

        .fixed-top-left-bom {
            font-size: 0.7rem;
            margin-top: 0.5rem;
        }

        .fixed-top-rigth {
            color: #df1414;
            font-width: 600;
        }

        .fixed-bom {
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 0.65rem;
        }

        .selectList {
            width: 100%;
            display: none;
        }

        .selectList-fixe {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 0 1rem;
            border-bottom: 1px solid #f2f2f2;
        }

        .selectList-fixe > li {
            margin: 0.5rem;
        }

        .selectList-li {

            padding: 0.3rem;
            border: 1px solid #f2f2f2;
        }

        .content-none {
            /*position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);*/
            text-align: center;
        }
        .infinite-scroll-preloader {
            margin-top:-20px;
        }
    </style>


</head>

<body>
<div class="page">
    <div class="content" data-type="">
        <header class="bar bar-nav barFlex" style="background: #fff">
            <div class="lfetDiv"><span class="icon icon-left "></span></div>
            <div><span>课程列表</span></div>
            <div class="rightDiv">   </div>
        </header>
        <div class="bar bar-header-secondary">
            <div class="searchbar row" style="display:flex;justify-content:space-between;align-items: center;">
                <div class="search-input col-85">
                    <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
                <div
                        class="searchText"
                        style="font-size: 0.8rem; line-height: 1.4rem;background: #00A9F2;border-radius:0.4rem;width: 4rem;height: 1.6rem;text-align: center;margin-left: 1.5rem;">
                    搜索
                </div>
            </div>
        </div>
        <div class="contentOut">
            <div class="buttons-tab">
                <div class="tab-link button btn_price" style="color: #000;">价格</div>
                <div class="tab-link button btn_setCourse" style="color: #000;">
                    <div>设置学科</div>
                </div>
            </div>
            <!--            //素材列表-->
            <div class="selectList">
                <ul class="selectList-fixe"></ul>
            </div>
            <!--            //课程列表-->
            <div class="content-block">
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>
</div>

<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ = jQuery.noConflict();</script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script>

<script type="text/javascript">
    let loading = false;
    let itemsPerLoad = 10;
    let curNum = 10;
    let allLength = 0;
    let scoll = true;
    let timers = null;
    var $btn = true; //课程分类
    var $btn1 = true;//课程价格
    let a = '';
    //返回 按钮
    $('.lfetDiv').on('click',function () {
        console.log('返回按钮');
        native_goto("local/finish");
    })
    //	调接口
    function getParams(data) {
        // 		data需要转成json调用 ，函数urlParamParseJson();
        $(".content-fixed").remove();
        allLength = 0;
        var jsonData = urlParamParseJson(data);
        getAjax();
    }

    //點擊價格後獲取篩選數據，取消後取消篩選
    $(function () {
        $(".btn_setCourse").click(function () {
            $('.btn_price').css("color", "#000");
            $btn1 = true;//课程价格
            if ($btn) {
                $(".selectList").css("display", "block");
                $btn = false;
            } else {
                $(".selectList").css("display", "none");
                $btn = true;
            }
        });
    });
    //点击价格获取数据
    $(function () {
        $(".btn_price").click(function () {
            $(".selectList").css("display", "none");
            if ($btn1) {
                $(this).css("color", "blue");
                $btn1 = false;
                let sortprice = 'desc';
                $(".content-fixed").remove();
                itemsPerLoad = curNum;
                scoll= true;
                allLength = 0
                getAjax( '' , '' ,sortprice );
                console.log('這裡是點擊後的')
            } else {
                $(this).css("color", "#000");
                scoll= true;
                $btn1 = true;
                $(".content-fixed").remove();
                itemsPerLoad = curNum
                scoll= true;
                allLength = 0
                getAjax( );
            }
        });
    });

    //頁面加載後請求接口
    $(document).ready(function () {
        $(".content-fixed").remove();
        allLength = 0;
        getAjax();
    });

    //获取课程分类
    $(document).ready(function () {
        net_request('get', 'api/v1/books', {}, (res) => {
            console.log(res, '成功');
            let html = '';
            if (res.success) {
                for (let i = 0; i < res.data.length; i++) {
                    html += `<li class="selectList-li" data-id="${res.data[i].id}">${res.data[i].book_name}</li>`
                }
                $$('.selectList-fixe').html(html);
            }
        }, (err) => {
            console.log(err, '教材')
        })
    });

    //根据点击的课程分类id查询课程列表
    $$('.selectList-fixe').on('click', '.selectList-li', function () {
        let id = $$(this).data('id');
        $(".content-fixed").remove();
        itemsPerLoad = curNum;
        allLength = 0;
        $(".selectList").css("display", "block");
        scoll= true;
        getAjax('',id);
        if ($btn) {
            $btn = false;
        } else {
            $(".selectList").css("display", "none");
            $btn = true;
        }
        // net_request('get', 'api/v1/subject', {book_id: id}, newsSuccessCallBack, newsTypeErrorCallBack)
    })

    //根据输入的搜索内容查询课程列表
    $('.searchText').on('click', function () {
        a = $(" #search ").val();
        // net_request('get', 'api/v1/subject', {title: a}, newsSuccessCallBack, newsTypeErrorCallBack)
        $(".content-fixed").remove();
        itemsPerLoad = curNum;
        scoll= true;
        allLength = 0;
        getAjax(a);
        if(itemsPerLoad > 0){
            $.toast('获取数据成功')
        }else{
            $.toast('暂无更多数据')
        }

    });

    $('.content').scroll(function() {
        console.log(12312)
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight && scoll) {
            // $.alert('scroll開始下一頁');
            clearTimeout(timers);
            //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
            timers = setTimeout(function() {
                allLength = $('.content-fixed').length;
                console.log(allLength)
                getAjax(); //调用执行上面的加载方法
            }, 300);
        }
    });
    function getAjax(title = '',id = '',sortprice=''){
        net_request('get', 'api/v1/subject',
            {
                title,
                id,
                sortprice,
                offset: allLength ,
                limit: itemsPerLoad,
            }, newsSuccessCallBack, newsTypeErrorCallBack)
    };
    //列表item点击事件
    $('.content-block').on('click','.content-fixed',function (e) {
        let cid = e.currentTarget.dataset.id;
        native_goto('local/tab1_zhiboketang_details?subject_id='+cid);
    })
    function newsSuccessCallBack(res) {
        loading = false;
        if (res.success && res.data.length > 0) {
            let list = res.data;
            let html = '';
            if(allLength == 0){
                $('.content-block').html('');
            }
            for (let i = 0; i < list.length; i++) {
                html += `<div class="content-fixed" data-id="${list[i].id}">
                    <div class="fixed-left">
                        <div class="left-img">
                            <img src="${list[i].dec_img}" alt="">
                        </div>
                    </div>
                    <div class="fixed-right">
                        <div class="fixed-top">
                            <div class="fixed-top-left">
                                <div class="fixed-top-left-top">${list[i].title}</div>
                                <div class="fixed-top-left-bom">${list[i].explain}</div>
                            </div>
                            <div class="fixed-top-rigth">
                                <div>￥${list[i].price}</div>
                            </div>
                        </div>
                        <div class="fixed-bom">
                            <span>${list[i].teacher}</span>
                            <span style="margin: 0 0.3rem">•</span>
                            <span>${list[i].play_count}人观看</span>
                        </div>
                    </div>
                </div>`
            }
            $('.infinite-scroll-preloader').remove();
            $('.content-block').append(html);
            if (res.data.length < itemsPerLoad) {
                scoll = false;
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
            }
            $("#search").val('');
            $btn = true;
        } else {
            scoll = false;
            $('.infinite-scroll-preloader').remove();
            let html = `
                <div class="content-none">
                <text>暂无数据</text>
</div>
            `;
            $('.selectList').css('display', 'none');
            $('.content-block').html(html);
            $btn = true;
        }
    }


    function newsTypeErrorCallBack(err) {
        scoll = false;
        loading = false;
        console.log(err)
    }

</script>
</body>

</html>